<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Bootstrup 3可预览的HTML5文件上传插件</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" />	
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="js/fileinput.js" type="text/javascript"></script>
    <script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="htmleaf-container">
		<div class="container kv-main">
            <div class="page-header">
            	<h2>Bootstrap File Input Example <small></h2>
            </div>
            
            
            <form id="form1" action="${pageContext.request.contextPath}/api/upload.do" method="post" enctype="multipart/form-data">
                <input id="file-0" class="file" type="file" name="file" multiple data-min-file-count="1">
                <br>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-default">Reset</button>
            </form>
            
            
            <form id="form3" action="${pageContext.request.contextPath}/api/upload.do" method="post" enctype="multipart/form-data">
                <hr>
                <div class="form-group">
                    <input id="file-1" name="file3" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                </div>
                <hr>
                <div class="form-group">
                    <input id="file-4" name="file6" type="file" class="file" data-upload-url="${pageContext.request.contextPath}/api/upload.do">
                </div>
                <hr>
                <div class="form-group">
                    <input id="file-5" name="file8" class="file" type="file" multiple data-preview-file-type="any"  data-upload-url="${pageContext.request.contextPath}/api/upload.do" data-preview-file-icon="">
                </div>
            </form>
        </div>
	</div>
</body>
<script type="text/javascript">
	    $("#file-0").fileinput({
	        'allowedFileExtensions' : ['jpg', 'png','gif'],
	    });
	    
	    
	    $("#file-1").fileinput({
	        uploadUrl: '${pageContext.request.contextPath}/api/upload.do', // you must set a valid URL here else you will get an error
	        allowedFileExtensions : ['jpg', 'png','gif'],
	        overwriteInitial: false,
	        maxFileSize: 1000,
	        maxFilesNum: 10,
	        slugCallback: function(filename) {
	            return filename.replace('(', '_').replace(']', '_');
	        }
		});
	      
	    
		$("#file-4").fileinput({
			uploadExtraData: {kvId: '10'}
		});
	    $(".btn-warning").on('click', function() {
	        if ($('#file-4').attr('disabled')) {
	            $('#file-4').fileinput('enable');
	        } else {
	            $('#file-4').fileinput('disable');
	        }
	    });    
	    $(".btn-info").on('click', function() {
	        $('#file-4').fileinput('refresh', {previewClass:'bg-info'});
	    });
	    
	    
	    $(document).ready(function() {
	        $("#test-upload").fileinput({
	            'showPreview' : false,
	            'allowedFileExtensions' : ['jpg', 'png','gif'],
	            'elErrorContainer': '#errorBlock'
	        });
	    });
</script>
</html>